<template>
    <a-form :model="formState" :labelCol="{ span: 6 }" name="basic" autocomplete="off" @finish="onFinish"
        @finishFailed="onFinishFailed">
        <a-row>
            <a-form-item label="Username" name="username" style="width:500px"
                :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.username" />
            </a-form-item>
            <a-form-item label="Password" name="password" style="width:500px"
                :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" />
            </a-form-item></a-row>
        <a-row>
            <a-form-item label="Username" name="username" style="width:500px"
                :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.username" />
            </a-form-item>
            <a-form-item label="Password" name="password" style="width:500px"
                :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" />
            </a-form-item></a-row> <a-row>
            <a-form-item label="time" style="width:500px"> <a-time-range-picker /></a-form-item>
        </a-row>
        <a-row>
            <a-form-item label="select" style="width:500px"> <a-radio-group v-model:value="value">
                    <a-radio :value="1">A</a-radio>
                    <a-radio :value="2">B</a-radio>
                    <a-radio :value="3">C</a-radio>
                    <a-radio :value="4">D</a-radio>
                </a-radio-group></a-form-item>
        </a-row>
    </a-form>
</template>
<script setup>
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const formState = reactive({
    username: '',
    password: '',
    remember: true,
});
const onFinish = values => {
    console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
</script>